<template>
    <!--miniprogram/pages/room/room.wxml-->
    <!-- 在模版上放置标签 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="page-room">
        <view class="" style="opacity: 0;">
            <trtc-room id="trtc-component" :config="rtcConfig" ref="trtcComponent"> </trtc-room>
        </view>
        <view class="tip-toast" v-if="showTipToast">
            <view>VR带看</view>
            <view>对方忙线中，请稍后再试</view>
        </view>
        <web-view v-else :src="webUrl"></web-view>
    </view>
    <!-- #endif -->
</template>

<script>
    // #ifdef MP-WEIXIN
    // import { genTestUserSig } from '../../debug/GenerateTestUserSig.js'
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    const Config = require("@/config.js");
    const api = require("@/static/js/api.js");
    const Signature = {};
    // import trtcRoom from "@/wxcomponents/trtc-room/trtc-room";
    import trtcRoom from "../static/wxcomponents/trtc-room/trtc-room";
    const utils = require("@/static/js/utils.js")
    let that = null
    
    let timerId = null;
    export default {
        data() {
            return {
                rtcConfig: {
                    sdkAppID: Config.imSdkAppID,
                    // 必要参数 开通实时音视频服务创建应用后分配的 sdkAppID
                    userID: '',
                    // 必要参数 用户 ID 可以由您的帐号系统指定
                    userSig: '',
                    // 必要参数 身份签名，相当于登录密码的作用
                    template: '', // 必要参数 组件模版，支持的值 1v1 grid custom ，注意：不支持动态修改, iOS 不支持 pusher 动态渲染
                    enableCamera: false,
                },
                showTipToast: false,
                subscribeList: {},
                options: {},
                webUrl: 'https://talkyi.fzzkzh.com/wxinf/toindexv.do?openid=123&pid=4&ifcanhb=1&ifhd=1&roomid=666',
                trtcRoomStatus: 0 , //==0 初始状态， 1为正在1V1  , 2 房间满退出1V1
                
            };
        },

        components: {
            trtcRoom
        },
        props: {},
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        /**
         * 生命周期函数--监听页面加载
         * @param {*} options 配置项
         */
        onLoad: function(options) {
            that = this;
            console.log('room onload', options);
            wx.setKeepScreenOn({
                keepScreenOn: true
            }); // 获取 rtcroom 实例

            var paramObj = {
                userId: options.userID,
                ownerId: options.ownerId,
                roomId: options.roomID,
                ifhd: 1, //是否带看
                // ifctrl: options.isSeller == 1 ? 1 : 2, //1是置业顾问 2顾客
            }

            that.webUrl = that.shopInfo.panoramaUrl + '&' + utils.KeyValueToUrl(paramObj)

            console.log("webRoom webviewUrl:", that.webUrl)

            //this.trtcComponent = this.selectComponent('#trtc-component'); // 监听TRTC Room 关键事件
            this.trtcComponent = this.$refs.trtcComponent;
            console.log(this.trtcComponent)
            this.bindTRTCRoomEvent();

            // 将String 类型的 true false 转换成 boolean
            Object.getOwnPropertyNames(options).forEach(key => {
                if (options[key] === 'true') {
                    options[key] = true;
                }

                if (options[key] === 'false') {
                    options[key] = false;
                }
            });

            this.options = options; // querystring 只支持传递 String 类型, 注意类型转换
            this.enterRoom()
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function() {
            console.log('room ready');
            wx.setKeepScreenOn({
                keepScreenOn: true
            });
            
           
        },

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function() {
            console.log('room show');
            wx.setKeepScreenOn({
                keepScreenOn: true
            });
           
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function() {
            let that = this
            console.log('room hide'); // onHide 后由微信接管，限制了不能退房，只能取消订阅
            // 退后台后取消发布音频
            // this.trtcComponent.unpublishLocalAudio()
        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function() {
            console.log('room unload');
            wx.setKeepScreenOn({
                keepScreenOn: false
            });
            if (this.remoteUser) {
                this.trtcComponent.unsubscribeRemoteAudio({
                    userID: this.remoteUser
                }).then(function() {

                });
            }

            this.trtcComponent.unpublishLocalAudio().then(function() {

            })
            this.trtcComponent.exitRoom().then(function() {
                console.log("退出房间成功");
            });
        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function() {},

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function() {},

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function() {},
        methods: {
            getUserSigVideo(userId, success) {
                api.getImUserSign({
                    interfaceName: userId,
                    param: {}
                }).then(res => {
                    console.log('getUserSig', res);
                    if (res.success) {
                        Signature.userSig = res.data;
                        Signature.sdkAppID = Config.imSdkAppID;
                        typeof success == 'function' && success();
                    }
                })
            },

            enterRoom(){
                var options = this.options
                this.getUserSigVideo(options.userID, () => {
                    this.__enterRoom({
                        roomID: Number(options.roomID),
                        userID: options.userID,
                        template: options.template,
                        debugMode: options.debugMode,
                        frontCamera: options.frontCamera,
                        localVideo: options.localVideo,
                        localAudio: options.localAudio,
                        enableEarMonitor: options.enableEarMonitor,
                        enableAutoFocus: options.enableAutoFocus,
                        localMirror: options.localMirror,
                        enableAgc: options.enableAgc,
                        enableAns: options.enableAns,
                        videoHeight: options.videoHeight,
                        videoWidth: options.videoWidth,
                        maxBitrate: Number(options.maxBitrate),
                        minBitrate: Number(options.minBitrate),
                        audioVolumeType: options.audioVolumeType,
                        audioQuality: options.audioQuality,
                        // pusher URL 参数
                        scene: options.scene,
                        encsmall: options.encsmall,
                        cloudenv: options.cloudenv,
                        enableBlackStream: options.enableBlackStream,
                        streamID: options.streamID,
                        userDefineRecordID: options.userDefineRecordID,
                        privateMapKey: options.privateMapKey,
                        pureAudioMode: options.pureAudioMode,
                        recvMode: options.recvMode,
                        // player 参数
                        enableRecvMessage: options.enableRecvMessage
                    });
                });
            },


            __enterRoom: function(params) {
                params.template = params.template || '1v1';
                params.roomID = params.roomID || this.randomroomID();
                params.userID = params.userID || this.randomUserID();
                console.log('* room enterRoom', params);
                params.sdkAppID = Signature.sdkAppID;
                params.userSig = Signature.userSig;
                this.template = params.template;
                var rtcConfig = {}
                if (params.template === 'grid') {
                    rtcConfig = {
                        sdkAppID: params.sdkAppID,
                        // 您的实时音视频服务创建应用后分配的 sdkAppID
                        userID: params.userID,
                        userSig: params.userSig,
                        template: params.template,
                        // 1v1 grid custom
                        debugMode: params.debugMode,
                        // 非必要参数，打开组件的调试模式，开发调试时建议设置为 true
                        frontCamera: params.frontCamera,
                        enableEarMonitor: params.enableEarMonitor,
                        enableAutoFocus: params.enableAutoFocus,
                        localMirror: params.localMirror,
                        enableAgc: params.enableAgc,
                        enableAns: params.enableAns,
                        videoWidth: params.videoWidth,
                        videoHeight: params.videoHeight,
                        maxBitrate: params.maxBitrate,
                        minBitrate: params.minBitrate,
                        beautyLevel: 9,
                        // 开启美颜等级 0～9级美颜
                        enableIM: false,
                        // 可选，仅支持初始化设置（进房前设置），不支持动态修改
                        audioVolumeType: params.audioVolumeType,
                        audioQuality: params.audioQuality,
                        // pusher URL 参数
                        scene: params.scene,
                        // rtc live
                        encsmall: params.encsmall ? 1 : 0,
                        cloudenv: params.cloudenv,
                        enableBlackStream: params.enableBlackStream,
                        streamID: params.streamID,
                        userDefineRecordID: params.userDefineRecordID,
                        privateMapKey: params.privateMapKey,
                        pureAudioMode: params.pureAudioMode,
                        recvMode: params.recvMode
                    };
                } else {
                    rtcConfig = {
                        sdkAppID: params.sdkAppID,
                        // 您的实时音视频服务创建应用后分配的 sdkAppID
                        userID: params.userID,
                        userSig: params.userSig,
                        template: params.template,
                        // 1v1 grid custom
                        debugMode: params.debugMode,
                        // 非必要参数，打开组件的调试模式，开发调试时建议设置为 true
                        beautyLevel: 9,
                        // 默认开启美颜
                        enableIM: false,
                        enableCamera: false,
                        // 可选，仅支持初始化设置（进房前设置），不支持动态修改
                        audioVolumeType: params.audioVolumeType
                    };
                }
                this.rtcConfig = rtcConfig;

                setTimeout(() => {
                    // roomID 取值范围 1 ~ 4294967295
                    this.trtcComponent.enterRoom({
                        roomID: params.roomID
                    }).then(() => {                  
                        if (this.template === 'custom') {
                            // 设置推流端视窗的坐标和尺寸
                            this.trtcComponent.setViewRect({
                                userID: params.userID,
                                xAxis: '480rpx',
                                yAxis: '160rpx',
                                width: '240rpx',
                                height: '320rpx'
                            });
                        }
                    }).catch(res => {
                        console.error('* room joinRoom 进房失败:', res);
                    });
                }, 200)


                // this.$nextTick(()=>{
                //     // roomID 取值范围 1 ~ 4294967295
                //     this.trtcComponent.enterRoom({
                //         roomID: params.roomID
                //     }).then(() => {
                //         if (this.template === 'custom') {
                //             // 设置推流端视窗的坐标和尺寸
                //             this.trtcComponent.setViewRect({
                //                 userID: params.userID,
                //                 xAxis: '480rpx',
                //                 yAxis: '160rpx',
                //                 width: '240rpx',
                //                 height: '320rpx'
                //             });
                //         }
                //     }).catch(res => {
                //         console.error('* room joinRoom 进房失败:', res);
                //     });              
                // })  
            },
            bindTRTCRoomEvent: function() {
                const TRTC_EVENT = that.trtcComponent.EVENT;
                that.timestamp = []; // 初始化事件订阅
                that.trtcRoomStatus = 0; //==0 初始状态， 1为正在1V1  , 2 房间满退出1V1
                
                that.trtcComponent.on(TRTC_EVENT.LOCAL_JOIN, event => {
                    console.log('* room LOCAL_JOIN', event); // 进房成功，触发该事件后可以对本地视频和音频进行设置
                    that.timestamp.push(new Date());
                    // if (this.options.localVideo === true || this.options.template === '1v1') {
                    //     this.trtcComponent.publishLocalVideo();
                    // }

                    if (that.options.localAudio === true || that.options.template === '1v1') {
                        that.trtcComponent.publishLocalAudio();
                    }

                    if (that.options.template === 'custom') {
                        that.trtcComponent.setViewRect({
                            userID: event.userID,
                            xAxis: '0rpx',
                            yAxis: '0rpx',
                            width: '240rpx',
                            height: '320rpx'
                        });
                    }
                });
                this.trtcComponent.on(TRTC_EVENT.LOCAL_LEAVE, event => {
                    console.log('* room LOCAL_LEAVE', event);
                });
                this.trtcComponent.on(TRTC_EVENT.ERROR, event => {
                    console.log('* room ERROR', event);
                }); // 远端用户进房

                this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_JOIN, event => {
                    //====进房间逻辑
                    // 1. 最多2个人
                    // 2. 加入超多10秒,不会被强制退出
                    // 3. 不一样的身份才能在一个房间内
                    var remoteUserList = this.trtcComponent.getRemoteUserList()
                    
                    this.timestamp.push(new Date());
                    
                    console.log('* room REMOTE_USER_JOIN', event, this.trtcComponent.getRemoteUserList(),this.timestamp);
                    //===第一次远程用户加入，人数2，房间满了
                    if ((remoteUserList.length >= 2) && this.timestamp.length == 2) {
                        // 房间里已经有两个人
                        that.trtcRoomStatus = 2
                        exit();
                    } else if ((remoteUserList.length == 1) && (this.timestamp.length == 2)) {
                        //===房间里只有一个人
                        that.trtcRoomStatus = 1
                        const interval = this.timestamp[1] - this.timestamp[0];
                        if (interval<10000){
                            api.getSalesmanDetail({
                                interfaceName: remoteUserList[0].userID,
                                param: {
                                            
                                }
                            }).then(res => {
                                console.log("userInfo:",res)
                                if (res.success) {
                                    if (res.data.isSeller == that.isSeller){
                                        that.trtcRoomStatus = 2
                                        exit()
                                    }
                                }
                            })
                        }
                    }else{
                        that.trtcRoomStatus = 1
                    }


                    function exit() {

                        // 房间里已经有两个人
                        that.showTipToast = true
                        if (that.remoteUser) {
                            that.trtcComponent.unsubscribeRemoteAudio({
                                userID: that.remoteUser
                            }).then(function() {});
                        }
                        that.trtcComponent.unpublishLocalAudio().then(function() {})
                        that.trtcComponent.exitRoom().then(function() {
                            console.log("退出房间成功");
                        });
                        setTimeout(() => {
                            that.showTipToast = false
                            wx.navigateBack({
                                delta: 1
                            });
                        }, 4000);
                    }





                    // this.timestamp.push(new Date()); // 1v1视频通话时限制人数为两人的简易逻辑，建议通过后端实现房间人数管理
                    // // 2人以上同时进行通话请选择网格布局

                    // if (this.template === '1v1' && this.timestamp.length > 1) {
                    //     const interval = this.timestamp[1] - this.timestamp[0];
                    //     if (interval < 1000) {
                    //         // 房间里已经有两个人
                    //         that.showTipToast = true
                    //         setTimeout(() => {
                    //             that.showTipToast = false
                    //             wx.navigateBack({
                    //                 delta: 1
                    //             });
                    //         }, 4000);
                    //     }
                    // }
                    
                }); // 远端用户退出

                this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_LEAVE, event => {
                    console.log('* room REMOTE_USER_LEAVE', event, this.trtcComponent.getRemoteUserList());

                    if (this.template === '1v1') {
                        this.timestamp = [];
                    }

                    if (this.template === '1v1' && this.remoteUser === event.data.userID) {
                        this.remoteUser = null;
                    }
                }); // 远端用户推送视频

                this.trtcComponent.on(TRTC_EVENT.REMOTE_VIDEO_ADD, event => {
                    console.log('* room REMOTE_VIDEO_ADD', event, this.trtcComponent
                        .getRemoteUserList()); // 订阅视频

                    const userList = this.trtcComponent.getRemoteUserList();
                    const data = event.data;

                    if (this.template === '1v1' && (!this.remoteUser || this.remoteUser === data.userID)) {
                        // 1v1 只订阅第一个远端流
                        this.remoteUser = data.userID;
                        this.trtcComponent.subscribeRemoteVideo({
                            userID: data.userID,
                            streamType: data.streamType
                        });
                    } else {
                        // if (!this.data.subscribeList[data.userID + '-video']) {
                        this.trtcComponent.subscribeRemoteVideo({
                            userID: data.userID,
                            streamType: data.streamType
                        }); // 标记该用户已首次订阅过

                        this.subscribeList[data.userID + '-video'] = true; // }
                    }

                    if (this.template === 'custom' && data.userID && data.streamType) {
                        let index = userList.findIndex(item => {
                            return item.userID === data.userID;
                        });
                        index++;
                        const y = 320 * index + 160; // 设置远端视图坐标和尺寸

                        this.trtcComponent.setViewRect({
                            userID: data.userID,
                            streamType: data.streamType,
                            xAxis: '480rpx',
                            yAxis: y + 'rpx',
                            width: '240rpx',
                            height: '320rpx'
                        });
                    }
                }); // 远端用户取消推送视频

                this.trtcComponent.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, event => {
                    console.log('* room REMOTE_VIDEO_REMOVE', event, this.trtcComponent
                        .getRemoteUserList());
                }); // 远端用户推送音频

                this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_ADD, event => {
                    console.log('* room REMOTE_AUDIO_ADD', event, this.trtcComponent
                        .getRemoteUserList()); // 订阅音频

                    const data = event.data;

                    if (this.template === '1v1' && (!this.remoteUser || this.remoteUser === data.userID)) {
                        this.remoteUser = data.userID;
                        this.trtcComponent.subscribeRemoteAudio({
                            userID: data.userID
                        });
                    } else {
                        // if (!this.data.subscribeList[data.userID + '-audio']) {
                        this.trtcComponent.subscribeRemoteAudio({
                            userID: data.userID
                        }); // 标记该用户已首次订阅过

                        this.subscribeList[data.userID + '-audio'] = true; // }
                    }
                }); // 远端用户取消推送音频

                this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, event => {
                    console.log('* room REMOTE_AUDIO_REMOVE', event, this.trtcComponent
                        .getRemoteUserList());
                }); // this.trtcComponent.on(TRTC_EVENT.LOCAL_NET_STATE_UPDATE, (event)=>{
                //   console.log('* room LOCAL_NET_STATE_UPDATE', event)
                // })
                // this.trtcComponent.on(TRTC_EVENT.REMOTE_NET_STATE_UPDATE, (event)=>{
                //   console.log('* room REMOTE_NET_STATE_UPDATE', event)
                // })

                this.trtcComponent.on(TRTC_EVENT.IM_READY, event => {
                    console.log('* room IM_READY', event);
                });
                this.trtcComponent.on(TRTC_EVENT.IM_MESSAGE_RECEIVED, event => {
                    console.log('* room IM_MESSAGE_RECEIVED', event);
                });
            },
            randomUserID: function() {
                return new Date().getTime().toString(16).split('').reverse().join('');
            },
            randomroomID: function() {
                return parseInt(Math.random() * 9999);
            }
        }
    };
    // #endif
</script>

<style>
    .page-room {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .tip-toast {
        position: absolute;
        top: 40vh;
        width: 70vw;
        left: 15vw;
        border-radius: 12rpx;
        height: 20vh;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .tip-toast view {
        padding: 20rpx 0;
        font-size: 32rpx;
    }
</style>
